<template>
	<div class="x-multipicture-image">
		<div class="multipicture-li multipicture-mcbox1" v-for="(item,index) in viewModel" :key="index">
			<el-image class="multipicture-img" :src="$ala.urlImage(item)" :lazy="true" fit="cover"></el-image>
			<div class="multipicture-action">
				<div class="multipicture-but1" @click="replaceTab(index)">替换</div>
				<div class="multipicture-but1" @click="deleteChang(index)">删除</div>
			</div>
		</div>
		<div class="multipicture-li multipicture-mcbox2" @click="replaceTab(null)"><i class="el-icon-plus"></i></div>
		<el-dialog v-el-drag-dialog :visible="dialogVisible" top="8vh" :before-close="handleClose" append-to-body>
			<zk-file-manage @autoDialogClose="handleClose" @selectFileChildEvent="selectFileChildEvent"></zk-file-manage>
		</el-dialog>
	</div>
</template>
<script>
	import elDragDialog from '@/service/directives/el-dragDialog'
	export default {
		directives: {
			elDragDialog
		},
		model: {
			event: 'change',
			prop: 'dataModel'
		},
		props: {
			dataModel: {}
		},
		data() {
			return {
				viewModel: [],
				dialogVisible: false,
				existIndex: null
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				if (this.dataModel) {
					this.viewModel = this.dataModel
				}
			},
			deleteChang(vIndex) {
				this.viewModel.splice(vIndex, 1)
			},
			handleClose() {
				this.dialogVisible = false
			},
			selectFileChildEvent(image) {
				if (this.existIndex) {
					this.viewModel[this.existIndex] = image
				} else {
					this.viewModel.push(image)
				}
				this.handleClose()
			},
			replaceTab(currentIndex) {
				this.existIndex = currentIndex
				this.dialogVisible = true
			}
		},
		watch: {
			viewModel: {
				deep: true,
				handler(val) {
					this.$emit('change', val)
				}
			}
		}
	}
</script>
<style lang="scss">
	@import './style.scss';
</style>